<include file="Public/mheader" />
<style>
body{
	width:100%;
	height:100%;
	background:url(/upload/ntxx/bg_lx.jpg?rand=928)  no-repeat;
	background-attachment:fixed;
	/*background-size: 100% 100%;
	position: relative;*/
	background-size: cover;
	background-position: 50% 50%;
	font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
	font-size:18px;
}
.center{
	margin:0 auto;
	padding:180px 30px 100px 30px;
}
.content{
	background:rgba(255,255,255,0.6);
	padding: 8px 2px 2px 8px;
	border-radius: 10px;
	min-height: 8em;
}
.title{
	text-indent:1em;
	margin-bottom:10px;
}
.img{
	margin-top:10px;
}
.img img{
	max-width:100%;
}

.aw>div{
	margin: 5px -5px;
	border: #888888 1px solid;
	padding: 5px;
	border-radius: 5px;
	position: relative;
}
.aw>.error:after{
	content:"";
	width:3px;
	height:20px;
	position: absolute;
	right:15px;
	bottom:5px;
	border-right: red 3px solid;
	transform:rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.aw>.error:before{
	content:"";
	width:3px;
	height:20px;
	position: absolute;
	right:15px;
	bottom:5px;
	border-right: red 3px solid;
	transform:rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.aw>.success:after{
	content:"";
	width:10px;
	height:20px;
	position: absolute;
	right:10px;
	bottom:5px;
	border-right: red 3px solid;
	border-bottom: red 3px solid;
	transform:rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.fra{
	position:absolute;
	right:10px;
	top:10px;
	background:rgba(255,255,255,0.6);
	font-size:16px;
}
a.btn.btn-block{
	margin-top:5px;
	margin-bottom:5px;
}
.bottom-div{
	margin-top: 1em !important;
	text-align:center;
}
</style>
<div class="center">
	<div class="fra">
		<div>当前第<span class="index">0</span>/{$count}题</div>
	</div>
	<div class="content">
		<div class="title"></div>
		<div class="aw">
			<div class="answer" data-index="1"></div>
			<div class="answer" data-index="2"></div>
			<div class="answer" data-index="3"></div>
			<div class="answer" data-index="4"></div>
			<div id="doing" class="bottom-div row">
				<div class="bottom-button col-xs-6"><a class="btn btn-info" href='javascript:void(0)' data-action="prev" role="button">上一题</a></div>
				<div class="bottom-button col-xs-6"><a class="btn btn-info" href='javascript:void(0)' data-action="next" role="button">下一题</a></div>
			</div>
			<div id="finish" class="bottom-div row" style="display: none">
				<!--<div class="bottom-button col-xs-4"><a class="btn btn-info" href='javascript:void(0)' data-action="prev" role="button">上一题</a></div>-->
				<div class="bottom-button col-xs-6"><a class="btn btn-info" href='{:U("index/index")}' role="button">回到首页</a></div>
				<div class="bottom-button col-xs-6"><a class="btn btn-warning" href='{:U("lx/index")}' role="button">再答一次</a></div>
			</div>
		</div>
		<div class="img" style="display:none;">相关图片：<img src="" /></div>
	</div>
</div>
<script>

	$(function(){
		var index = -1;
		var title = $(".title");
		var aw1 = $(".aw>div").eq(0);
		var aw2 = $(".aw>div").eq(1);
		var aw3 = $(".aw>div").eq(2);
        var aw4 = $(".aw>div").eq(3);
		var fraDom = $(".franum");
		var fra = 0;
		var timeDom = $(".time");
		var timeout;
		var postanswering = false;
		$("a[data-action]").on("click",function(){
			var action = $(this).data("action");
			if(action=="prev"){
				if(index>0){
					index-= 2;
				}
				else{
					layer.alert("这是第一题，没有上一题");
					return;
				}
			}
			next();
		});
		$(".answer").on("click",function(){
			if(postanswering){
				return;
			}
			postanswering = true;
			var i = $(this).data("index");
			$.post('{:U("postanswer")}',{index:index,i:i},function(data){
				if(data.status==0){
					layer.alert(data.info);
					$("#doing").hide();
					$("#finish").show();
					return;
				}
				data = data.info;
				$(".answer[data-index="+data+"]").addClass("success");
				if(data!=i){
					$(".answer[data-index="+i+"]").addClass("error");
				}
				else{
					fra+=5;
					fraDom.html(fra);
				}
				//tonext(11);
			});
		});
		function next(){
			index += 1;
			$(".aw>div").removeClass("success").removeClass("error");
			$.post('{:U("getanswer")}',{index:index},function(data){
				postanswering = false;
				if(data.status==0){
					layer.alert(data.info);
					$("#doing").hide();
					$("#finish").show();
					return;
				}
				data = data.info;
				$(".index").html(index+1);
				title.html(data.title);
                if(data.answer1!=="") {
                    setHTML(aw1, data.answer1);
                    aw1.show();
                }
                else
                    aw1.hide();
                if(data.answer2!=="") {
                    setHTML(aw2, data.answer2);
                    aw2.show();
                }
                else
                    aw2.hide();
                if(data.answer3!=="") {
                    setHTML(aw3, data.answer3);
                    aw3.show();
                }
                else
                    aw3.hide();
                if(data.answer4 !== "") {
                    setHTML(aw4, data.answer4 );
                    aw4.show();
                }
                else
                    aw4.hide();
				aw1.html(data.answer1);
				aw2.html(data.answer2);
				aw3.html(data.answer3);
				aw4.html(data.answer4);
				showimg(data.pic);
				//tonext(31);
			});
		}
        function setHTML(o,v){
            o.empty().append(""+v+"");
        }
		function tonext(time){
			clearTimeout(timeout);
			var t = time-1;
			if(t<=0){
				next();
				return;
			}
			timeDom.html(t);
			timeout = setTimeout(function(){tonext(t)},1000);
		}
		function showimg(src){
			var img = $(".img");
			var i = new Image();
			i.src = src;
			i.onload = function(){
				img.show().find("img").attr("src",src);
			}
			i.onerror = function(){
				img.hide();
			}
		}
		next();
	});
</script>
<include file="public/footer" />